<template>
  <!-- <div>害虫类型</div> -->
  <SubTitle>
        <template #subtitle>害虫类型</template>
      </SubTitle>
  <div ref="pesttype" class="pesttype">

</div>
</template>

<script>
import '../../api.js'
import '../../assets/js/common.js'
import * as echarts from 'echarts'
import SubTitle from './SubTitle.vue';
import { getpesttype } from '../../api.js';
import { changestring } from '../../assets/js/common.js';
export default {
    data(){
        return{
            datas:[],
        }
    },
    components:{
        SubTitle
    },
    mounted(){
        setTimeout(() => {
            let pesttype =  echarts.init(this.$refs.pesttype);
        let data =this.datas;
        //  [
        //     {value:25,name:"夜蛾"},
        //     {value:20,name:"三化螟"},
        //     {value:10,name:"稻飞虱"},
        //     {value:15,name:"二化螟"}
        // ]
        let option = {
            title:{
                text:"当日害虫类型占比",
                textStyle:{
                    color:"skyblue"
                }
                
            },
            legend:{
                left:"0",
                top:'25%',
                orient:'verical',
                textStyle:{
                    color:'white',
                    fontSize:"16px"
                }
            },
            series:{
                name:"",
                type:'pie',
                data:data,
                radius:["50%","70%"],
                label:{
                    show:true,
                    formatter:'{c}',
                    color:'yellow',
                    fontSize:'16px'
                }
            }
        };
        pesttype.setOption(option)
        }, 1000);
    },
    created(){
        this.Getpesttype();
    },
        methods:{
        async Getpesttype() {
           await getpesttype("/insect_condition/data")
            .then((Response) => {
          
                var pesttype = changestring(Response.data.detail);
                // var arr =Response.data[0].detail.split(';');
                // console.log(arr);
                // var pesttype = new Array();
                // for(var i=0;i<arr.length;i++){
                //     let b = arr[i].split('=');
                //     console.log("b",b);

                //     const regex = /\d+(\.\d+)?/g;
                //      var numbers = arr[i].match(regex);
                //      console.log("nmbers",numbers); //number 数量

                //      if(b.length!=1){
                //         var c= b[1].split(",");
                //         console.log("c",c[0]);  //c 类型
                //      }

                //        if(numbers!=null){
                //         let e = new Object();
                //             e.value = numbers[0];
                //             e.name = c[0];
                //             console.log(e);

                //             pesttype[i] = e;
                //        }
                    
                // }
                //console.log("pest",pesttype);
                this.datas = pesttype;
            });
        },
    },
}
</script>

<style lang="less" scoped>
.pesttype{
    width: 100%;height: 290px;
}
@media screen and (max-width: 720px) {
    .pesttype{
      width: 100%;
      height: 300px;
      color:white;
    }
  }
</style>